<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日访问量统计</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head>
<body>

<div id="main" style="width: 1300px;height: 520px;"></div>

<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript">

    $.ajax({
        url:'cloud-visit/pv',
        type:'get',
        dataType:'json',
        success:function (result) {
            if (result.code == 200) {
                myChart.setOption({
                    visualMap: [{
                        show: false,
                        type: 'continuous',
                        seriesIndex: 0,
                        min: 0,
                        max: result.data.hourMaxValue
                    }, {
                        show: false,
                        type: 'continuous',
                        seriesIndex: 1,
                        dimension: 0,
                        min: 0,
                        max: result.data.dayDateList.length
                    }],
                        xAxis: [{
                            data: result.data.hourDateList
                        }, {
                            data: result.data.dayDateList,
                            gridIndex: 1
                        }],
                    series: [{
                        type: 'line',
                        showSymbol: false,
                        data: result.data.hourValueList
                    }, {
                        type: 'line',
                        showSymbol: false,
                        data: result.data.dayValueList,
                        xAxisIndex: 1,
                        yAxisIndex: 1
                    }]
                });
            }
        }
    })

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {

        visualMap: [{
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 0
        }, {
            show: false,
            type: 'continuous',
            seriesIndex: 1,
            dimension: 0,
            min: 0,
            max: 0
        }],


        title: [{
            left: 'center',
            text: 'CloudBox网上云盘-近24小时访问量统计'
        }, {
            top: '52%',
            left: 'center',
            text: 'CloudBox网上云盘-近30日访问量统计'
        }],
        tooltip: {
            trigger: 'axis'
        },
        xAxis: [{
            data: []
        }, {
            data: [],
            gridIndex: 1
        }],
        yAxis: [{
        }, {
            gridIndex: 1
        }],
        grid: [{
            bottom: '60%'
        }, {
            top: '60%'
        }],
        series: [{
            type: 'line',
            showSymbol: false,
            data: []
        }, {
            type: 'line',
            showSymbol: false,
            data: [],
            xAxisIndex: 1,
            yAxisIndex: 1
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    //3秒钟刷新一次
    setInterval(function () {
        $.ajax({
            url:'cloud-visit/pv',
            type:'get',
            dataType:'json',
            success:function (result) {
                if (result.code == 200) {
                    myChart.setOption({
                        visualMap: [{
                            show: false,
                            type: 'continuous',
                            seriesIndex: 0,
                            min: 0,
                            max: result.data.hourMaxValue
                        }, {
                            show: false,
                            type: 'continuous',
                            seriesIndex: 1,
                            dimension: 0,
                            min: 0,
                            max: result.data.dayDateList.length
                        }],
                        xAxis: [{
                            data: result.data.hourDateList
                        }, {
                            data: result.data.dayDateList,
                            gridIndex: 1
                        }],
                        series: [{
                            type: 'line',
                            showSymbol: false,
                            data: result.data.hourValueList
                        }, {
                            type: 'line',
                            showSymbol: false,
                            data: result.data.dayValueList,
                            xAxisIndex: 1,
                            yAxisIndex: 1
                        }]
                    });
                }
            }
        })
    }, 3000);

</script>
</body>
</html>